<template>
	<view class="login_container">
		<view class="login_box" v-if="!isShowQcord">
			<!--  :style="'height:' + screenHeight + 'px !important'" -->
			<view class="login_bgc_box">
				<image src="/static/login/img-bgc.png" mode="widthFix" class="login_bgc_img"></image>
			</view>

			<!-- form -->
			<view class="login_form_box">
				<view class="login_form_all">
					<view class="form_phone_box">
						<view class="phone_title_box">
							<view class="phone_icon_box">
								<image src="/static/login/icon-phone.png" mode="" class="phone_icon"></image>
							</view>
							<view class="phome_title">
								手机号
							</view>
						</view>
						<view class="phone_input_box">
							<u-input v-model="phoneValue" type="number" :border="false" :clearable="false"
								placeholder="请输入手机号"
								placeholder-style="font-size: 28rpx;font-family: Source Han Sans CN;font-weight: 400;color: #000;"
								maxlength="11" />
						</view>
					</view>

					<view class="form_phone_box" style="padding-top: 79rpx;">
						<view class="phone_title_box">
							<view class="phone_icon_box">
								<image src="/static/login/icon-pwd.png" mode="" class="phone_icon"></image>
							</view>
							<view class="phome_title">
								验证码
							</view>
						</view>
						<view class="code_input_all">
							<view class="code_input_box">
								<u-input v-model="codeValue" type="number" :border="false" :clearable="false"
									placeholder="请输入验证码"
									placeholder-style="font-size: 28rpx;font-family: Source Han Sans CN;font-weight: 400;color: #000;"
									maxlength="11" />
							</view>
							<view class="phone_code" @click="sendCodeBtn">
								{{ send ? sendTitle : second + 's重新发送' }}
							</view>
						</view>
					</view>

					<!-- 我已阅读 -->
					<view class="read_box">
						<u-checkbox-group @change="checkboxGroupChange" style="display: flex;align-items: center;">
							<u-checkbox @change="checkboxChange" v-model="item.checked"
								v-for="(item, index) in readList" :key="index" shape="circle"
								:name="item.name">{{item.name}}</u-checkbox>
							<span class="protocol_title" @click="handlerUserProtocol">《用户服务协议》</span>和<span
								class="protocol_title" @click="handlerPrivacyAgreement">《隐私协议》</span>
						</u-checkbox-group>
					</view>

					<!-- 按钮 -->
					<view class="submit_btn_box">
						<!-- <view class="submit_btn" @click="handlerSubmit"> -->
						<view class="submit_btn" @click="getWeChatCode">
							登录
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="qcord_img_all" v-else>
			<!-- <view class="qcord_img_box">
				<image :src="imgUrl" mode="widthFix" class="qcord_img" @longtap="bankImg">
				</image>
			</view> -->
			<canvas style="width: 300rpx;height:300rpx" canvas-id="code">
				<!-- @longtap="bc_code" -->
				<img :src="imgUrl" class="qcord_img_box" />
			</canvas>
			<view class="qcord_title">
				<view class="">
					长按保存图片
				</view>
				<view class="">
					通过微信扫码打开
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// import VConsole from 'vconsole';
	export default {
		data() {
			return {
				phoneValue: '',
				codeValue: '',
				send: true, //验证码按钮状态
				second: 0, //显示倒计时
				s: 60, //默认倒计时
				sendTitle: '获取验证码',
				readList: [{
					name: '我已阅读',
					checked: false
				}],
				checkBoxValue: false,
				screenHeight: '',
				isWeixin: false,
				noUser: '',
				failedOpenid: '',
				userId: '',
				noAuth: '',
				isShowQcord: false,
				imgUrl: '/static/login/微信图片_20231024092400.png'
			}
		},
		onLoad() {
			// const vConsole = new VConsole();
			this.isWeixin = this.isWechat()
			if (this.isWeixin) {
				console.log('微信内部')
				this.isShowQcord = false
				this.getUrlParam()
				// if (uni.getStorageSync('phone')) {
				// 	uni.reLaunch({
				// 		url: '/pages/index/index?userId=' + uni.getStorageSync('phone')
				// 	})
				// }
			} else {
				console.log('微信外部')
				this.isShowQcord = true
			}
			this.screenHeight = uni.getSystemInfoSync().windowHeight;
		},
		methods: {
			// 发送验证码接口
			getSmsCodeJkc() {
				uni.request({
					url: 'https://qy.wechat.hengfengweiye.cn/api/qy_send_message',
					method: 'POST',
					data: {
						phone: this.phoneValue,
						type: '1'
					},
					success: res => {
						console.log('发送验证码成功', res)
						if (res.data.code == 1) {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
							return
						}
					}
				})
			},

			// 验证验证码接口
			validSmsCodeJkc() {
				const that = this
				uni.showLoading({
					title: '正在登录'
				})
				uni.request({
					url: 'https://qy.wechat.hengfengweiye.cn/api/qy_valid_message',
					method: 'POST',
					data: {
						phone: this.phoneValue,
						code: this.codeValue
					},
					success: res => {
						console.log('验证通过', res)
						if (res.data.code == 1) {
							uni.hideLoading()
							let local = encodeURIComponent(
								'http://qy.wechat.hengfengweiye.cn/api/getOpenid'); //获取当前页面地址作为回调地址
							let appid = 'wxd12038f5b1f522b1'
							// let appid = 'wx883e50fd34558f39'
							let phone = this.phoneValue
							uni.setStorageSync('phone', this.phoneValue)

							window.location.href =
								`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${local}&response_type=code&scope=snsapi_userinfo&state=${phone}#wechat_redirect`

							// that.getUrlParam()
						} else {
							uni.hideLoading()
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							})
							return
						}
					}
				})
			},

			// 获取url参数
			getUrlParam() {
				console.log(this.getQueryString("user_id"), '打印useridf')
				this.noUser = this.getQueryString("no_user")
				this.failedOpenid = this.getQueryString("failed_openid")
				this.userId = this.getQueryString("user_id")
				this.noAuth = this.getQueryString("no_auth")

				console.log('打印接收参数666666', this.noUser)
				console.log('打印接收参数777777', this.failedOpenid)
				console.log('打印接收参数888888', this.userId)
				if (this.noUser) {
					uni.showToast({
						title: '没有用户信息',
						icon: 'none'
					})
					return
				} else if (this.failedOpenid) {
					uni.showToast({
						title: '授权失败',
						icon: 'none'
					})
					return
				} else if (this.userId) {
					uni.reLaunch({
						url: '/pages/index/index?userId=' + this.phoneValue
					})
				} else if (this.noAuth == '1') {
					uni.showToast({
						title: '没有领取权限',
						icon: 'none'
					})
					return
				}

			},

			// 用正则获取url参数
			getQueryString(name) {
				let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
				let url = window.location.href.split("?")[1].match(reg);
				// console.log(url)
				if (url != null) {
					return decodeURI(url[2]); //decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码。
				} else {
					return null;
				}
			},


			//方法：用来判断是否是微信内置的浏览器
			isWechat() {
				return String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger";
			},
			//方法:用来提取code
			getUrlCode(name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) ||
					[, ''
					])[1]
					.replace(/\+/g, '%20')) || null
			},
			//检查浏览器地址栏中微信接口返回的code
			// checkWeChatCode() {
			// 	let code = this.getUrlCode('code')
			// 	console.log('打印code', code)
			// 	uni.showToast({
			// 		title: `微信code=${code}`
			// 	})
			// 	if (code) {

			// 		this.getOpenidAndUserinfo(code)
			// 	}
			// },
			//请求微信接口，用来获取code
			getWeChatCode() {
				console.log(this.checkBoxValue)
				if (this.checkBoxValue == false) {
					uni.showToast({
						title: '请勾选我已阅读',
						icon: 'none'
					})
					return
				}
				this.validSmsCodeJkc()
			},


			//验证码按钮点击
			sendCodeBtn() {
				let that = this;
				//防连点
				if (!that.send) {
					return false
				}
				this.send = false;
				that.time();

				if (this.phoneValue.length !== 11) {
					uni.showToast({
						title: "请输入手机号",
						icon: "none",
					})
					that.send = true
					that.sendTitle = '获取验证码'
					return;
				}
				this.getSmsCodeJkc()

				// const data = {
				// 	phone: this.registerForm.phone
				// }

				// SendCode(data).then(res => {
				// 	if (res.code === 1) {
				// 		uni.showToast({
				// 			title: res.msg,
				// 			icon: "none",
				// 		})
				// 	} else {
				// 		uni.showToast({
				// 			title: res.msg,
				// 			icon: "none",
				// 		})
				// 		return
				// 	}
				// });

			},
			//倒计时
			time() {
				let that = this;
				that.second = that.s;
				let interval = setInterval(() => {
					if (that.second == 1) {
						that.send = true;
						that.second = that.s;
						clearInterval(interval)
					} else {
						that.second--
					}
				}, 1000)
			},

			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				console.log(e, '1');
				this.checkBoxValue = e.value
			},
			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				console.log(e, '2');
			},

			// 用户服务协议
			handlerUserProtocol() {},

			// 隐私协议
			handlerPrivacyAgreement() {},

			// 登录
			handlerSubmit() {
				// if (this.phoneValue == '') {
				// 	uni.showToast({
				// 		title: '请输入手机号',
				// 		icon: 'none'
				// 	})
				// 	return
				// } else if (this.codeValue == '') {
				// 	uni.showToast({
				// 		title: '请输入验证码',
				// 		icon: 'none'
				// 	})
				// 	return
				// } else if (this.checkBoxValue == false) {
				// 	uni.showToast({
				// 		title: '请勾选我已阅读',
				// 		icon: 'none'
				// 	})
				// 	return
				// }

				// 调接口
			}

		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #88b8ff;
	}

	.login_container {

		.login_box {

			.login_bgc_box {
				position: relative;
				width: 100%;
				height: 100%;

				.login_bgc_img {
					width: 100%;
					min-height: 100%;
				}
			}

			.login_form_box {
				position: absolute;
				top: 375rpx;
				left: 50%;
				transform: translateX(-50%);

				.login_form_all {
					width: 702rpx;
					height: 897rpx;
					background: #FFFFFF;
					opacity: 0.9;
					border-radius: 30rpx;
					padding: 90rpx 51rpx 76rpx 55rpx;

					.form_phone_box {

						.phone_title_box {
							display: flex;
							padding-bottom: 30rpx;

							.phone_icon_box {
								width: 30rpx;
								height: 30rpx;

								.phone_icon {
									width: 100%;
									height: 100%;
								}
							}

							.phome_title {
								font-size: 28rpx;
								font-family: Source Han Sans CN;
								font-weight: bold;
								color: #4D4D4D;
								padding-left: 17rpx;
							}
						}

						.phone_input_box {
							width: 596rpx;
							height: 90rpx;
							font-family: my-font;
							background: #e6eeff;
							border-radius: 45rpx;
							padding-left: 45rpx;

							::v-deep .u-input__input {
								min-height: 90rpx !important;
							}
						}

						.code_input_all {
							display: flex;
							align-items: center;
							justify-content: space-between;
							width: 596rpx;
							height: 90rpx;
							font-family: my-font;
							background: #e6eeff;
							border-radius: 45rpx;
							padding-left: 45rpx;

							.code_input_box {

								::v-deep .u-input__input {
									min-height: 90rpx !important;
								}
							}

							.phone_code {
								font-size: 24rpx;
								font-weight: 400;
								color: #4F96FF;
								padding-right: 30rpx;
							}
						}
					}

					.read_box {
						padding-top: 56rpx;

						::v-deep .u-checkbox__label {
							font-size: 22rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #808080;
							margin-right: 0;
						}

						.protocol_title {
							color: #5692FF;
						}
					}

					.submit_btn_box {
						padding-top: 160rpx;

						.submit_btn {
							width: 596rpx;
							height: 90rpx;
							background: #5692FF;
							border-radius: 45rpx;
							font-size: 36rpx;
							font-family: Source Han Sans CN;
							font-weight: 500;
							color: #FFFFFF;
							text-align: center;
							line-height: 90rpx;
						}
					}
				}
			}
		}

		.qcord_img_all {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			.qcord_title {
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #000;
				padding-top: 10rpx;
			}

			.qcord_img_box {
				display: block;
				width: 100%;
				height: 100%;
				-webkit-touch-callout: default; // 要配置这行关键代码，不然可能不生效

				.qcord_img {
					width: 100%;
					height: 100%;
				}
			}
		}

	}
</style>